<template>
  <div class="hot-spot-container">
    <div class="hot-spot-ranking">
      <div class="hot-spot-label">ESDN热点排行榜</div>
      <hot-spot-ranking></hot-spot-ranking>
    </div>
    <div class="three-day-ranking">
      <three-day-ranking :days=3></three-day-ranking>
      <three-day-ranking :days=7></three-day-ranking>
      <three-day-ranking :days=30></three-day-ranking>
    </div>
  </div>
</template>

<script>
import ThreeDayRanking from "@/components/Home/Item/ThreeDayRanking.vue";
import HotSpotRanking from "@/components/Home/Item/HotSpotRanking.vue";
export default {
  components: { ThreeDayRanking, HotSpotRanking },
};
</script>

<style scoped>
.hot-spot-container {
  padding-top: 4px;
  width: 100%;
  height: 1834px;
  text-align: left;
}
.hot-spot-ranking {
  display: inline-block;
  height: 100%;
  width: 75%;
  border-right: 2px solid #f0f0f2;
}
.hot-spot-label {
  text-align: center;
  line-height: 22px;
  margin-left: 40px;
  margin-bottom: 8px;
  height: 22px;
  width: 144px;
  color: white;
  background-color: #005a95;
  border-radius: 8px;
  border: #00b281 solid 2px;
}
.three-day-ranking {
  vertical-align: top;
  display: inline-block;
  height: 100%;
  width: 24%;
}
</style>
